<template>
  <div class="wrap">
    <div class="moudle-title">环 保 参 数【mg/Nm3】</div>
    <div class="moudle-content">
      <div class="mete-unit">#1</div>
      <div class="mete-unit">#2</div>
    </div>
    <div class="moudle-content">
      <div class="mete-list">
        <div class="mete-item1 mete-item">
          <div class="mete-item-title">SO2</div>
          <div class="mete-item-val">
            {{ towNumber(dataModel['FGD_FGD61_HTA20CQ001']) }}
          </div>
        </div>
        <div class="mete-item2 mete-item">
          <div class="mete-item-title">NOx</div>
          <div class="mete-item-val">
            {{ towNumber(dataModel['FGD_FGD61_HTA20CQ0030']) }}
          </div>
        </div>
        <div class="mete-item3 mete-item">
          <div class="mete-item-title">烟尘</div>
          <div class="mete-item-val">
            {{ towNumber(dataModel['FGD_FGD61_HTA20CQ005']) }}
          </div>
        </div>
      </div>
      <div class="mete-list">
        <div class="mete-item1 mete-item">
          <div class="mete-item-title">SO2</div>
          <div class="mete-item-val">
            {{ towNumber(dataModel['FGD_FGD62_HTA20CQ001']) }}
          </div>
        </div>
        <div class="mete-item2 mete-item">
          <div class="mete-item-title">NOx</div>
          <div class="mete-item-val">
            {{ towNumber(dataModel['FGD_FGD62_HTA20CQ0030']) }}
          </div>
        </div>
        <div class="mete-item3 mete-item">
          <div class="mete-item-title">烟尘</div>
          <div class="mete-item-val">
            {{ towNumber(dataModel['FGD_FGD62_HTA20CQ005']) }}
          </div>
        </div>
      </div>
    </div>

    <div class="fuel-title">燃料调度【吨】</div>
    <div class="fuel-list">
      <div class="fuel-item fuel-item1">
        <div class="fuel-item-title">来</div>
        <div class="fuel-item-val">
          {{ towNumber(dataModel2['inHm']) + towNumber(dataModel2['inYm']) }}
        </div>
      </div>
      <div class="fuel-item fuel-item2">
        <div class="fuel-item-title">耗</div>
        <div class="fuel-item-val">
          {{ towNumber(dataModel2.outHm) + towNumber(dataModel2.outYm) + towNumber(dataModel2.outTfl) }}
        </div>
      </div>
      <div class="fuel-item fuel-item3">
        <div class="fuel-item-title">存</div>
        <div class="fuel-item-val">
          {{ towNumber(dataModel2.storeHm) + towNumber(dataModel2.storeYm) }}
        </div>
      </div>
      <div class="fuel-item fuel-item4">
        <div class="fuel-item-title">天</div>
        <div class="fuel-item-val">
          {{
            dataModel2.avgOut == 0
              ? 0
              : towNumber(
                  (towNumber(dataModel2.storeHm) + towNumber(dataModel2.storeYm)) / towNumber(dataModel2.avgOut)
                )
          }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import sppApi from '@/api/spp'

export default {
  name: 'SppLeftCenter',
  props: {
    data: { type: Object, default: () => {} }
  },
  data() {
    return {
      dataModel: {
        FGD_FGD61_HTA20CQ0030: 2.98,
        FGD_FGD62_HTA20CQ0030: 0,
        FGD_FGD61_HTA20CQ005: 0,
        FGD_FGD62_HTA20CQ005: 0,
        FGD_FGD61_HTA20CQ001: 0,
        FGD_FGD62_HTA20CQ001: 0
      },
      dataModel2: {
        fuelId: '',
        fuelDate: '',
        inHm: 0,
        inYm: 0,
        outHm: 0,
        outYm: 0,
        outTfl: 0,
        storeHm: 0,
        storeYm: 260681,
        avgOut: 0
      }
    }
  },
  watch: {
    data(newValue) {
      this.dataModel = newValue
    }
  },
  mounted() {
    const self = this
    this.initLoadData()
    let theNowTime = function () {
      self.initLoadData()
    }
    let speed = 60000
    setInterval(theNowTime, speed)
  },
  methods: {
    towNumber(val) {
      if (!val) return 0.0
      let val2 = isNaN(val) ? 0.0 : Math.round(val * 100) / 100

      return val2 < 0 ? 0.0 : val2
    },
    initLoadData() {
      sppApi.getfueldispatch().then((res) => {
        this.dataModel2 = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 10px 0 0 0;
}
.moudle-title {
  color: #50e9ff;
  font-size: 12px;
  text-align: center;
}

.moudle-content {
  display: flex;
  justify-content: space-around;
  padding: 10px 20px 0 20px;
  .mete-unit {
    color: #50e9ff;
    display: flex;
    align-items: center;
  }
}
.fuel-title {
  color: #50e9ff;
  font-size: 12px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.fuel-list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  color: #147dcf;
  font-size: 12px;
  padding-top: 1px;
  .fuel-item1 {
    background-color: hsl(51, 97%, 45%, 0.5);
    color: chartreuse;
  }
  .fuel-item2 {
    background-color: hsl(206, 82%, 45%, 0.5);
    color: chartreuse;
  }
  .fuel-item3 {
    background-color: hsl(51, 97%, 45%, 0.5);
    color: chartreuse;
  }
  .fuel-item4 {
    background-color: hsl(206, 82%, 45%, 0.5);
    color: chartreuse;
  }
  .fuel-item {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    .fuel-item-title {
      font-size: 20px;
    }
    .fuel-item-val {
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
    }
  }
}

.mete-list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  color: #147dcf;
  font-size: 14px;

  .mete-item {
    width: 55px;
    height: 48px;
    background-repeat: no-repeat;
    color: #147dcf;
    text-align: center;
  }
  .mete-item-title {
    padding-top: 0px;
  }
  .mete-item-val {
    font-size: 20px;
  }
  .mete-item1 {
    text-align: center;
    color: chartreuse;
    border-top-left-radius: 30%;
    border-bottom-left-radius: 30%;
    border: 1px solid chartreuse;
  }
  .mete-item2 {
    color: chartreuse;
    text-align: center;
    border-top: 1px solid chartreuse;
    border-bottom: 1px solid chartreuse;
  }
  .mete-item3 {
    color: chartreuse;
    border-top-right-radius: 30%;
    border-bottom-right-radius: 30%;
    text-align: center;
    border: 1px solid chartreuse;
  }
}

.content-table {
  padding-top: 15px;
  margin: 0 10px;
  text-align: center;
  width: 95%;
  height: 30%;
  th,
  tr,
  td {
    width: 14%;
    height: 30px;
    border-bottom: 1px solid #147dcf;
    text-align: center;
    .content-type {
      color: #50e9ff;
    }
    .content-val {
      color: gold;
    }
    .content-title {
      color: chartreuse;
    }
  }
}
</style>
